/* 
内联
p{
    color: red;
}
使用class
.para{
    color: red;
}
使用id ==> 在 html 是独一无二的
#para{
    color: red;
}
 */

 /* 
 1. 颜色
    RGB、HSL、16x
 2. 字体
    <https://www.zhihu.com/question/19680724>
    font-family: Helvetica， Arial          // 简介现代的线条，Mac上被认为是最佳的网页字体
    font-family: Times New Roman    // 典雅
    font-family: Andale Mono        // 等宽字体（编辑器通常使用）
    中文：微软雅黑
 3. 盒子模型
    [margin[borde[padding[height+width]]]]
    [外边框[边框[内边框[文字/图片]]]]
    外边距塌陷（两个盒子靠在一起的时候，选择最大的外边距）
  */

  body{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      font-weight: normal;  /*blod(加粗)*/
      line-height: 1.5em;       /*行距*/
  }

 .box1{
     background-color: antiquewhite;
     color: blue;
     border: 5px red solid;
 }

 .box1 h1{
    background-color: antiquewhite;
    color: blue;
    font-style: italic;
    text-decoration: underline;
}

 .container{
     width: 80%;
     margin: auto;
 }

 .list{
     list-style: square;
     list-style-image: url(./image/check2.png);     
 }

 button{
     background-color: #444444;
     padding: 10px 15px;
     color: #fff;
 }

 button:hover{
     background-color: red;
 }

 button:active{
     background-color: #fff;
 }

 a{
     text-decoration: none; /* 取消下划线 */
     color: red;
 }

 a:hover{

 }

 a:visited{
     color: blue;
 }

 .block{
     float:left;
     width:33.3%;
     border: 1px solid #ccc;
     box-sizing: border-box;
 }

 #main-block{
     float: left;
     width: 70%;
     border: 1px solid #ccc;
     box-sizing: border-box;
 }

 #sider-block{
     float: right;
     width: 30%;
     border: 1px solid #ccc;
     box-sizing: border-box;
 }

/* 每一行的浮动结束后 清除浮动 */
 .clearfix{
     clear:both;
 }